<!DOCTYPE html>
<html lang="zh_en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


    <!--<link href="red.css" rel="stylesheet" type="text/css">-->
    <link href="red.css" rel="alternate stylesheet" type="text/css" title="红色">
    <link href="blue.css" rel="alternate stylesheet" type="text/css" title="蓝色">
    <link href="yellow.css" rel="alternate stylesheet" type="text/css" title="黄色">

    <style>
        a {
            display: block;
            padding: 5px;
            margin: 10px;
            text-decoration:none;
        }
        .icon {
            width: 20px; height: 20px;
            background: url("data:image/svg+xml,%3Csvg height='512pt' viewBox='0 0 512 512' width='512pt' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m346 275.980469h-180c-11.046875 0-20-8.953125-20-20 0-11.042969 8.953125-20 20-20h180c11.046875 0 20 8.957031 20 20 0 11.046875-8.953125 20-20 20zm20-99.980469c0-11.046875-8.953125-20-20-20h-180c-11.046875 0-20 8.953125-20 20s8.953125 20 20 20h180c11.046875 0 20-8.953125 20-20zm0 160c0-11.046875-8.953125-20-20-20h-180c-11.046875 0-20 8.953125-20 20s8.953125 20 20 20h180c11.046875 0 20-8.953125 20-20zm22.460938 139.105469c9.449218-5.722657 12.46875-18.019531 6.746093-27.46875-5.726562-9.449219-18.023437-12.46875-27.46875-6.742188-33.59375 20.347657-72.234375 31.105469-111.738281 31.105469-119.101562 0-216-96.898438-216-216s96.898438-216 216-216 216 96.898438 216 216c0 42.589844-12.664062 84.042969-36.625 119.882812-6.140625 9.183594-3.671875 21.605469 5.507812 27.742188 9.1875 6.140625 21.605469 3.671875 27.742188-5.507812 28.378906-42.441407 43.375-91.585938 43.375-142.117188 0-68.378906-26.628906-132.667969-74.980469-181.019531-48.351562-48.351563-112.640625-74.980469-181.019531-74.980469s-132.667969 26.628906-181.019531 74.980469c-48.351563 48.351562-74.980469 112.640625-74.980469 181.019531s26.628906 132.667969 74.980469 181.019531c48.351562 48.351563 112.640625 74.980469 181.019531 74.980469 46.8125 0 92.617188-12.757812 132.460938-36.894531zm0 0'/%3E%3C/svg%3E") no-repeat center;
            background-size: 100%;
        }

        input[type='radio'] {
            position: absolute;
            clip: rect(0 0 0 0);
        }
        label {
            display: inline-block;
            width: 14px;
            height: 14px;
            background-color: #333;
            font-size: 0;
            vertical-align: middle;
            margin-right: 3px;
        }
        .outline {
            outline: #333333 1px solid;
        }
        .bg {
            width: 600px;
            height:200px;
        }


    </style>
</head>
<body>
    <div class="bg">

        <div>
            <a href="http://blank.html" target="_link">默认无参数</a>
            <a href="http://blank.html?id=1" target="_link">1参数</a>
            <a href="http://blank.html?id=22" target="_link">2参数</a>
            <a href="http://blank.html?id=333" target="_link">3参数</a>
        </div>
       <!-- &lt;!&ndash;<div>
            <a href="http://www.baidu.com/" target="_parent">带1235</a>
            <a href="http://www.souhu.com/?s=2" target="_seach">带1235</a>
            <a href="http://www.biying.com/?s=3" target="_seach">带1235</a>
            <a href="http://www.360.com/?s=4" target="_seach">带1235</a>
        </div>-->


    </div>

    <div>
        <input type="radio" id="red" name="col" value="red.css"><label for="red" style="background-color: red"></label>
        <input type="radio" id="blue" name="col" value="blue.css"><label for="blue" style="background-color: blue"></label>
        <input type="radio" id="yellow" name="col" value="yellow.css"><label for="yellow" style="background-color: yellow"></label>
    </div>
    <div>
        <a class="icon"></a>
    </div>
</body>

<script>
    let links = document.getElementsByTagName('link');
    links = [].slice.call(links);
    let elRadios = document.getElementsByTagName('input');
    let labels = document.getElementsByTagName('label');
    [].slice.call(elRadios).map((item, idx) => {
    	item.addEventListener('click', changeBg)
    })

//    links[0].disabled = true;

    function changeBg() {
	    let labelDom = this.nextSibling;
	    let val = this.value;

    	[].slice.call(labels).map((item, idx) => {
    		item.className = '';
		    links[idx].disabled = true;
	        labels[idx].className = ''
	    });
//
	    labelDom.className = 'outline';
//
	    [].slice.call(links).map(item => {
	    	if (item.getAttribute('href') === val) item.disabled = false;
        })
//	    links[0].disabled = false;
//	    links[0].href = val

    }
</script>

</html>